<!DOCTYPE html>
<html>
<head>
	<link rel="stylesheet" type="text/css" href="fonts/font-awesome-4.2.0/css/font-awesome.min.css" />
	<!-- <script src="js/jquery1.7.2.js"></script> -->
	<!-- <script src="js/Tdrag.js"></script> -->
	<script src="http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>

	<script src="js/jquery.dad.min.js"></script>
	
	<style type="text/css">
		/**{
			font-size: 100px;
		}*/
		.div1{
			position: absolute;
			top: 0px;
			left: 0px;
			width: 100px;
			height: 100px;
		}
		.div2{
			position: absolute;
			top: 200px;
			left: 0px;
			width: 100px;
			height: 100px;
		}
		.div3{
			position: absolute;
			top: 400px;
			left: 0px;
			width: 100px;
			height: 100px;
		}
		.dropzone{
			position: absolute;
			top: 100px;
			right: 200px;
			width: 180px;
			height: 200px;
		}
	</style>
</head>
<body id="body">
<span id="count"></span>
<div class="dowebok">
<div class="test">
<div class="div1"><i class="fa fa-camera-retro" style="font-size: 100px;color:blue;"></i></div>
</div>
<div class="test">
<div class="div2"><i class="fa fa-spinner fa-spin" style="font-size: 100px;color:yellow;"></i></div>
</div>
<div class="div3"><i class="fa fa-arrow-circle-o-down" style="font-size: 100px;color:red;"></i></div>
</div>
<div class="dropzone">
<i class="fa fa-trash-o" style="font-size: 200px"></i>
</div>
<script type="text/javascript">
$(function(){ 
	var d = $('.test').dad();
	var c = $('.test2').dad();
	d.addDropzone('.dropzone', function(e){
		e.remove();
	});
	c.addDropzone('.dropzone', function(e){
		e.remove();
	});
});

	
</script>
</body>